<template>
  <div id="app">
    <el-container>
      <el-aside width="200px">
        <el-tree
          :highlight-current="true"
          :data="menuTree"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          node-key="id"
          :default-expanded-keys="defaultTreeKey"
          ref="tree2"
        ></el-tree>
      </el-aside>
      <el-main>
        <el-row>
          <el-col :span="2" :offset="18">
            <el-button type="primary" size="mini" :disabled="addDisabled" @click="resetForm">新建</el-button>
          </el-col>
          <el-col :span="2">
            <ep-delete url="/sys/function/deleteMenu" parmeId="functionId" :id="nodeId">
              <el-button
                v-show="!saveDisabled"
                type="warning"
                size="mini"
                :init="true"
                @init="initTree"
              >删除</el-button>
            </ep-delete>
          </el-col>
        </el-row>
        <el-form
          :model="menuFrom"
          ref="menuFrom"
          label-width="100px"
          class="menuFrom"
          :rules="menuFromRules"
        >
          <el-row :gutter="10">
            <ep-input
              @input-message="onChange"
              colspan="10"
              label="功能名称"
              :value="menuFrom.title"
              name="title"
            ></ep-input>
            <ep-input
              @input-message="onChange"
              colspan="10"
              label="迭代版本"
              :value="menuFrom.funCode"
              name="funCode"
            ></ep-input>
          </el-row>
          <el-row>
            <ep-input
              @input-message="onChange"
              colspan="10"
              label="节点链接"
              :value="menuFrom.location"
              name="location"
              :eleDisabled="oneDisabled"
            ></ep-input>
            <ep-select
              @select-message="onChange"
              colspan="10"
              labelTitle="节点类型"
              :value="menuFrom.nodeType"
              name="nodeType"
              :eleDisabled="nodeDisabled"
              :optDisabled="1"
            ></ep-select>
          </el-row>
          <el-row>
            <ep-select
              @select-message="onChange"
              colspan="10"
              labelTitle="菜单类型"
              :value="menuFrom.funType"
              name="funType"
              :eleDisabled="menuTypeDisabled"
            ></ep-select>
            <ep-input
              colspan="10"
              label="排序"
              type="number"
              :value="menuFrom.funOrder"
              name="funOrder"
              @input-message="onChange"
            ></ep-input>

            <el-col :span="8">
              <el-form-item label="状态" prop="radio">
                <el-radio v-model="menuFrom.active" label="1">生效</el-radio>
                <el-radio v-model="menuFrom.active" label="2">失效</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="中文描述" prop="description">
                <el-input :rows="3" v-model="menuFrom.description" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" :disabled="saveDisabled" @click="submitForm('menuFrom')">保 存</el-button>
            <el-button type="primary">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Dictionaries from "../../utils/Dictionaries.js";
export default {
  data() {
    return {
      defaultTreeKey: [],
      addDisabled: false,
      isParent:false,
      nodeId: "",
      parentId: "",
      oneDisabled: false,
      menuTypeDisabled: true,
      nodeNum: 0,
      selectoptions: [
        {
          id: 1,
          label: 213
        }
      ],
      optNodeDisabled: false,
      menuTree: [],
      defaultProps: {
        children: "children",
        label: "title"
      },
      menuFrom: {
        title: "",
        // funCode: "",
        nodeType: "",
        location: "",
        funType: "",
        // funOrder: "",
        // description: "",
        active: "1"
      },
      saveDisabled: false,
      nodeDisabled: false,
      menuFromRules: {
        // title: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        title: this.$rules("请输入功能名称", 10),
        funCode: this.$rules("请输入功能编号", 20),
        nodeType: this.$rules("请选择节点类型", 20),
        funType: this.$rules("请选择菜单类型", 20),
        location: this.$rules("请输入节点链接", 100),
        description: this.$rulesMax(100)
      }
    };
  },
  created() {
    this.initTree();
  },
  methods: {
    initTree() {
      this.$get("/sys/function/queryTree").then(data => {
        this.menuTree = data.data.result;
        if (this.menuFrom.funType == 1) {
          this.saveDisabled = true;
        } else {
          this.saveDisabled = false;
        }
      });
    },
    onChange(data, type) {
      this.menuFrom[type] = data;
    },
    handleNodeClick(data, node) {
      this.isParent = false
      this.menuTypeDisabled = true;
      this.nodeId = data.id;
      this.parentId = data.id;
      this.nodeNum = node.level;
      

      var obj = Object.assign({}, data);
      this.menuFrom = obj;

      if (node.level == 1) {
        this.oneDisabled = true;
      } else {
        this.oneDisabled = false;
      }
      if (node.level == 3 || node.level == 1) {
        this.nodeDisabled = true;
      } else {
        this.nodeDisabled = false;
      }
      if (node.level == 3) {
        this.addDisabled = true;
      } else {
        this.addDisabled = false;
      }
      
      if (node.level == 2) {
        Dictionaries.nodeType[0].disabled = true;
        if (data.children) {
          Dictionaries.nodeType[2].disabled = true;
        } else {
          Dictionaries.nodeType[2].disabled = false;
        }
      } else {
        Dictionaries.nodeType[0].disabled = false;
      }
      if (this.menuFrom.funType == 1) {
        this.saveDisabled = true;
      } else {
        this.saveDisabled = false;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$post("/sys/function/saveMenu", {
            id: this.nodeId,
            parentId: this.menuFrom.nodeType == 1 || !this.isParent ? "" : this.parentId,
            title: this.menuFrom.title,
            funCode: this.menuFrom.funCode,
            nodeType: this.menuFrom.nodeType,
            location: this.menuFrom.location,
            funType: this.menuFrom.funType,
            funOrder: this.menuFrom.funOrder,
            description: this.menuFrom.description,
            active: this.menuFrom.active
          }).then(data => {
            if (data.success) {
              this.initTree();
            }
            this.$mess(data);
          });
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.isParent = true
      this.menuFrom.title = "";
      this.menuFrom.funCode = "";
      this.menuFrom.location = "";
      this.menuFrom.funOrder = "";
      this.menuFrom.description = "";
      this.menuFrom.active = "1";
      this.saveDisabled = false;
      this.nodeDisabled = false;
      this.nodeId = "";
      this.oneDisabled = false;
      if (this.nodeNum == 1) {
        this.menuTypeDisabled = false;
      }
      if (this.nodeNum == 2) {
        //  Dictionaries.nodeType[3].disabled = true;
        this.menuFrom.nodeType = "3";
        this.nodeDisabled = true;
      }
    }
  }
};
</script>

<style scoped lang="css">
.menuFrom {
  margin-top: 20px;
}
</style>    
